<template>
  <div class="ForgetPassword">
    <div class="avatar">
      <img class="logo" src="../../assets/logo.png" alt>
    </div>
    <div class="text">
      <p>
        <span>海川云谷固定资产管理云平台</span>
      </p>
    </div>
    <el-form ref="form" :model="form" class="container" :rules="rules">
      <el-form-item></el-form-item>
      <el-form-item prop="mobile">
        <el-input v-model="form.mobile" placeholder="手机号" prefix-icon="myicon myicon-user"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input type="auth" v-model="form.code" placeholder="请输入验证码" style="width:253px;"></el-input>
        <el-button
          v-show="show"
          type="primary"
          class="auth-btn"
          @click="getAuthCode"
          style="margin:0 0 0 35px"
        >获取验证码</el-button>
        <el-button
          v-show="!show"
          disabled
          class="count"
          @click="getAuthCode('form')"
          style="margin:0 0 0 35px;background-color: #f68c11;border:none;color:#fff"
        >{{count}}S 可重发</el-button>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          v-model="form.password"
          placeholder="密码"
          prefix-icon="myicon myicon-key"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password2">
        <el-input
          type="password"
          v-model="form.password2"
          placeholder="请再次输入密码"
          prefix-icon="myicon myicon-key"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="login-btn" @click="loginSubmit('form')">确定</el-button>
      </el-form-item>
      <router-link to="/Login">
        <el-button type="primary" class="register-btn">返回登录</el-button>
      </router-link>
      <el-form-item></el-form-item>
    </el-form>
  </div>
</template>
           
<script>
import { axiosPost, axiosGet } from "../../api/index.js";
export default {
  data() {
    return {
      show: true,
      count: "",
      timer: null,
      form: {
        mobile: "",
        code: "",
        password: "",
        password2: ""
      },
      rules: {
        mobile: [{ validator: mobileCheck, trigger: "blur" }],
        code: [{ validator: codeCheck, trigger: "blur" }],
        password: [{ validator: passwordCheak, trigger: "blur" }],
        password2: [{ validator: password2Check, trigger: "blur" }]
      }
    };

    var mobileCheck = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入11位手机号"));
        }
      }, 1000);
      callback();
    };

    var codeCheck = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入正确的验证码"));
      } else {
        callback();
      }
    };

    var passwordCheak = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.form.password !== "") {
          this.$refs.form.validateField("password");
        }
        callback();
      }
    };

    var password2Check = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
  },
  methods: {
    loginSubmit(formName) {
      // this.$router.push({ name: "Login" });
      // console.log(JSON.stringify(this.form));

      if (this.form.mobile === "") {
        this.$message({
          type: "error",
          message: "请输入手机号码"
        });
        return;
      }
      if (this.form.code === "") {
        this.$message({
          type: "error",
          message: "请输入验证码"
        });
        return;
      }

      if (this.form.password === "") {
        this.$message({
          type: "error",
          message: "请输入密码"
        });
        return;
      }
      if (this.form.password2 === "") {
        this.$message({
          type: "error",
          message: "请输入验证密码"
        });
        return;
      }

      if (this.form.password2 !== this.form.password) {
        this.$message({
          type: "error",
          message: "两次密码不一致"
        });
        return;
      }

      var bean = {
        mobile: this.form.mobile,
        auth: this.form.code,
        password: this.form.password
      };
      // console.log(JSON.stringify(bean));
      axiosPost("Account/ModifyPassword", bean).then(res => {
        if (res.status === 200) {
          if (res.data.success) {
            // console.log(res.data);
            this.$router.push({ name: "Login" });
          } else {
            // 如果失败，展示提示信息
            this.$message({
              type: "error",
              message: res.data.message
            });
          }
        } else {
          // 如果失败，展示提示信息
          this.$message({
            type: "error",
            message: res.meta.msg
          });
        }
      });
    },
    //获取验证码接口
    getAuthCode() {
      if (this.form.mobile === "") {
        this.$message({
          type: "error",
          message: "请输入手机号"
        });
        return;
      }
      axiosGet("/Account/GetAuthCode", {
        mobile: this.form.mobile
      });
      this.$message("验证码已发送,请耐心等待...");
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;

        this.show = false;

        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;

            clearInterval(this.timer);

            this.timer = null;
          }
        }, 1000);
      }
      /* axiosGet("/Account/GetAuthCode", { mobile: this.registerFrom.mobile });
      this.$message("验证码已发送,请耐心等待..."); */
    }
  }
};
</script>
<style lang = 'scss' scoped>
.ForgetPassword {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url("../../assets/01.jpg") center no-repeat;
  .container {
    position: absolute;
    left: 0;
    right: 0;
    width: 400px;
    padding: 0px 40px 15px 40px;
    margin: 200px auto;
    background: #282a30;
    border-radius: 2%;
    text-align: left;
  }
  .logo {
    border-width: 0px;
    position: absolute;
    left: 25px;
    top: 10px;
    width: 65px;
    height: 63px;
  }
  .text {
    border-width: 0px;
    position: absolute;
    left: 100px;
    top: 37px;
    width: 398px;
    height: 40px;
    font-family: "Arial-BoldMT", "Arial Bold", "Arial";
    font-weight: 700;
    font-style: normal;
    font-size: 28px;
    color: #fff;
  }
  .login-btn {
    width: 100%;
    border: none;
    background-color: #f68c11;
  }
  .register-btn {
    width: 100%;
    border: none;
    background-color: #f68c11;
  }
  .auth-btn {
    border: none;
    background-color: #f68c11;
  }
  .forget-password {
    text-align: right;
  }
}
</style>